<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <Promised :promise="getUserAsync">
        <template v-slot:pending>
          <Skeleton />
        </template>
        <template>
          <section>
            <Actions @save="saveUser" :user="user" class="actions-container" />

            <BasicForm ref="basicFormRef" :user="user" />

            <a-divider />

            <PositionForm ref="positionFormRef" :user="user" />

            <a-divider />
            <Roles :user="user" />
          </section>
        </template>
      </Promised>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getUser, userModify } from '@/api/flow/user'
import Actions from './Actions.vue'
import BasicForm from './Basic.vue'
import PositionForm from './Position.vue'
import Roles from './Roles'

export default {
  data () {
    return {
      getUserAsync: null,
      user: {
        department_identity: '',
        mobile: '',
        username: '',
        role: [],
        group: [],
        position: [],
      },

      state: {
        loading: false,
      },
    }
  },

  components: {
    Actions,
    BasicForm,
    PositionForm,
    Roles,
  },

  created () {
    this.getUserAsync = this.getUser()
  },

  computed: {
    uid () {
      return this.$route.params.uid
    },
  },

  methods: {
    // 获取用户
    getUser () {
      return new Promise((resolve, reject) => {
        getUser(this.uid)
          .then(data => {
            this.user = data

            this.$nextTick(() => {
              resolve(data)
            })
          })
          .catch(error => {
            reject(error)
          })
      })
    },

    // form
    validateFieldsForm () {
      const basicForm = this.$refs.basicFormRef.form
      const positionForm = this.$refs.positionFormRef.form

      return new Promise((resolve, reject) => {
        basicForm.validateFieldsAndScroll((err, values) => {
          if (!err) {
            positionForm.validateFieldsAndScroll((err, values) => {
               if (!err) {
                 resolve(values)
                 return values
               }
              reject(values)
            })
          } else {
            reject(values)
          }
        })
      })
    },

    // 提交表单
    submitForm () {
      return new Promise((resolve, reject) => {
        const basicForm = this.$refs.basicFormRef.form
        const positionForm = this.$refs.positionFormRef.form
        const data = {
          id: this.uid,
          ...basicForm.getFieldsValue(),
          ...positionForm.getFieldsValue(),
        }

        userModify(data)
          .then((data) => {
            // this.getUserAsync = this.getUser()
            resolve(data)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },

    // 保存成功
    saveUserSuccess() {
      this.$notification.success({
        message: '修改成功!',
        duration: 1,
      })
      
      // 用户详情
      this.$router.push({
        name: 'AccountDetails',
        params: {
          uid: this.uid
        }
      })
    },

    // 保存用户
    saveUser () {
      const { state } = this

      this.validateFieldsForm()
        .then(() => {
          this.submitForm()
            .then((res) => {
              this.getUser()
                .then(() => this.saveUserSuccess())
            })
            .finally(() => {
              state.loading = false
            })
        })
        .catch(() => {
          state.loading = false
        })
    },
  },
}

</script>

<style lang="scss" scoped>
.actions-container {
  margin-bottom: $margin-md;
}
</style>
